<template>
    <div>

        <!-- 楼层列表 -->
        <div class="table-data">
            <div class="search-box">
                <el-button size="small" type="primary" @click="dialogFormVisible = true"><i class="el-icon-plus"></i><span>新建楼层</span>
                </el-button>
            </div>
            <el-table
                    v-loading="loading"
                    element-loading-text="正在加载"
                    element-loading-spinner="el-icon-loading" :data="tableData" style="width:100%"
                    class="table-box">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="楼层名字" prop="title"></el-table-column>
                <el-table-column label="类型" prop="type_str"></el-table-column>
                <el-table-column label="排序" prop="sort">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" @change="handlerPageNo($event,scope.row)"
                                  placeholder="排序"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="created_at"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages" ref="page-box">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10,30,50]"
                        :page-size="size"
                        layout="total,sizes,prev,pager,next,jumper"
                        :total="total"
                ></el-pagination>
            </div>
        </div>
        <!--  -->
        <!-- 新建楼层 -->
        <el-dialog title="新建楼层" :visible.sync="dialogFormVisible" width="400px">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="楼层名称" label-width="120px" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="楼层类型" label-width="120px" prop="type">
                    <el-select v-model="form.type" placeholder="请选择活动区域">
                        <el-option label="轮播" value="1"></el-option>
                        <el-option label="大图" value="5"></el-option>
                        <el-option label="商品样式1（横向滑动）" value="3"></el-option>
                        <el-option label="商品样式2（一行两列）" value="6"></el-option>
                        <el-option label="商品样式3（一行一列）" value="7"></el-option>
                        <el-option label="商品样式4（一行三列）" value="8"></el-option>
                        <el-option label="商家" value="4"></el-option>
                        <el-option label="分类导航" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormAdd('ruleForm')">保存</el-button>
                <el-button @click="canceltheoperation(0)">取 消</el-button>
            </div>
        </el-dialog>
        <!--  -->


        <!-- 轮播 -->
        <el-dialog title="轮播/横向导航/大图" :visible.sync="dialogTableVisible" :show-close="false">
            <div class="add">
                <el-button size="small" @click="dialogFormAdd = true, bannerChildEdit = false"><i class="el-icon-plus"></i><span>添加楼层内容</span>
                </el-button>
            </div>
            <el-table border :data="gridData" height="500px">
                <el-table-column prop="name" label="标题"></el-table-column>
                <el-table-column prop="content" label="图片" width="200">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" alt="" srcset="" width="60px">
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="小程序路径" width="200"></el-table-column>
                <el-table-column prop="sort" label="排序">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" size="mini" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleBannelChildDelClick(scope.$index)"  type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTheoperation(1)">保存</el-button>
                <el-button @click="canceltheoperation(1)">取 消</el-button>
            </div>
        </el-dialog>
        <!--  -->
        <!-- 轮播添加 -->
        <el-dialog :visible.sync="dialogFormAdd" width="400px">
            <el-form :model="newsForm" :rules="rules1" ref="ruleForm1">
                <el-form-item prop="image">
                    <label for="verify_hour" class="el-form-item__label form-label">图片</label>
                    <uploadImg @bindSendImg="propImg" :imgUrl="newsForm.image"></uploadImg>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="newsForm.name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="链接" prop="name">
                    <el-input v-model="newsForm.path" ></el-input>
                </el-form-item> -->
                <el-form-item label="路径" prop="path">
                    <el-input v-model="newsForm.path"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormAdd1('ruleForm1')">保存</el-button>
                <el-button @click="canceltheoperation(2)">取 消</el-button>
            </div>
        </el-dialog>
        <!--  -->


        <!-- 已关联商品 -->
        <el-dialog title="已关联商品" :visible.sync="linkedProducts" :show-close="false">
            <div class="add">
                <el-button size="small" @click="addItem = true"><i class="el-icon-plus"></i><span>添加商品</span>
                </el-button>
            </div>
            <el-table border :data="gridData" height="500px">
                <el-table-column prop="id" label="id" width="150"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="sort" label="排序">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" size="mini" placeholder="排序"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleBannelChildDelClick(scope.$index)"  type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTheoperation(3)">保存</el-button>
                <el-button @click="canceltheoperation(3)">关闭</el-button>
            </div>
        </el-dialog>
        <!--  -->
        <!-- 添加商品 -->
        <el-dialog title="添加商品" :visible.sync="addItem" :show-close="false">
            <div class="add">
                <el-input size="small" v-model="title" placeholder="商品名称"></el-input>
                <el-button type="primary" @click="searchForProducts">搜索</el-button>
            </div>
            <el-table border :data="goodsList" height="500px">
                <el-table-column prop="id" label="id" width="150"></el-table-column>
                <el-table-column prop="title" label="名称"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="submitFormAdd2(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <!--<el-button type="primary" @click="canceltheoperation(5)">保存</el-button>-->
                <el-button @click="canceltheoperation(5)">关闭</el-button>
            </div>
        </el-dialog>
        <!--  -->


        <!-- 已关联商家-->
        <el-dialog title="已关联商家" :visible.sync="associatedBusinesses" :show-close="false">
            <div class="add">
                <el-button size="small" @click="addMerchant = true"><i class="el-icon-plus"></i><span>添加商家</span>
                </el-button>
            </div>
            <el-table border :data="gridData" height="500px">
                <el-table-column prop="id" label="id" width="150"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="sort" label="排序">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" size="mini" placeholder="排序"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                    <el-button @click="handleBannelChildDelClick(scope.$index)"  type="text" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTheoperation(4)">保存</el-button>
                <el-button @click="canceltheoperation(4)">关闭</el-button>
            </div>
        </el-dialog>
        <!--  -->
        <!-- 添加商家 -->
        <el-dialog title="添加商家" :visible.sync="addMerchant" :show-close="false">
            <div class="add">
                <el-input size="small" v-model="title" placeholder="商家名称"></el-input>
                <el-button type="primary" @click="searchForShop">搜索</el-button>
            </div>
            <el-table border :data="shopList" height="500px">
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="submitFormAdd2(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <!--<el-button type="primary" @click="canceltheoperation(6)">保存</el-button>-->
                <el-button @click="canceltheoperation(6)">关闭</el-button>
            </div>
        </el-dialog>
        <!--  -->
    </div>

</template>

<script lang="ts">

    import {Component, Vue, Provide, Prop, Watch} from "vue-property-decorator";

    import frontPage from "@/api/frontPage";
    import goodsApi from "@/api/goods";
    import uploadImg from "@/components/uploadImg/index.vue";

    @Component({
        components: {uploadImg}
    })
    export default class frontPageStyle extends Vue {
        dialogFormVisible: Boolean = false//新建楼层弹框
        dialogTableVisible: Boolean = false //轮播编辑弹框
        dialogFormAdd: Boolean = false //轮播编辑添加
        linkedProducts: boolean = false; //已关联商品
        associatedBusinesses: boolean = false;//已关联商家
        bannerChildEdit: boolean = false; // 轮播、大图、分类，是否修改
        bannerChildIndex: number = 0; // 修改下标
        addItem: boolean = false;//添加商品
        title: string = '';//商品搜索
        addMerchant: boolean = false;//添加商家
        @Provide() tableData: any = []; // 表格数据
        @Provide() page: number = 1; // 当前page
        @Provide() size: number = 10; // 请求数据的个数 默认5
        @Provide() total: number = 0; // 总数据条数
        @Provide() loading: Boolean = true; // 是否显示加载图标
        gridData: any = []
        goodsList: any = []//搜索商品数据
        shopList: any = []//搜索商家数据
        //轮播编辑/新建数据
        form: any = {
            name: '',
            type: '',
            id: ''
        }
        newsForm: any = {
            image: '',
            path: '',
            name: '',
            sort: 0
        }
        rules: any = {
            name: [
                {required: true, message: '请输入活动名称', trigger: 'blur'}
            ],
            type: [
                {required: true, message: '请选择活动名称', trigger: 'blur'}
            ]
        }
        rules1: any = {
            image: [
                {required: true, message: '请上传图片', trigger: 'blur'}
            ],
            path: [
                {required: true, message: '请选择路径', trigger: 'blur'}
            ],
            name: [
                {required: true, message: '请选择名称', trigger: 'blur'}
            ]
        }

        created() {
            this.loadData();
        }

        loadData() {
            frontPage.frontPageList(this.page, this.size)
                .then((res: any) => {
                    this.tableData = res.data.data.data;
                    this.total = res.data.data.count;
                    this.loading = false
                });
        }

        handleSizeChange(val: number): void {
            this.size = val;
            this.page = 1;
            this.loadData();
        }

        handleCurrentChange(val: number): void {
            this.page = val;
            this.loadData();
        }

        handlerPageNo(v: any, val: any) {//楼层排序改变
            let data = {
                id: val.id,
                sort: val.sort
            }
            frontPage.modifySort(data)
                .then((res: any) => {
                    if (res.data.msg) {
                        this.$message({
                            message: '操作成功',
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: "error"
                        });
                    }
                })

        }

        //楼层列表编辑
        handleEdit(val: any) {
            if (val.content_json.length !== 0) {
                let content = val.content_json
                content = content.map((va) => {
                    return va
                })
                this.gridData = content
            } else {
                this.gridData = []
            }
            if (val.type == 1 || val.type == 2 || val.type == 5) {
                this.dialogTableVisible = true
            } else if (val.type == 3 || val.type == 6) {
                this.linkedProducts = true
            } else if (val.type == 4) {
                this.associatedBusinesses = true
            }
            this.form = val;

        }

        //新建楼层
        submitFormAdd(ruleForm: any) {
            (this.$refs[ruleForm] as any).validate((valid: boolean) => {
                if (valid) {
                    this.form.id = "";
                    this.gridData = [];
                    if (this.form.type == 1 || this.form.type == 2 || this.form.type == 5) {
                        this.dialogTableVisible = true
                    } else if (this.form.type == 3 || this.form.type == 6 || this.form.type == 7 || this.form.type == 8) { // 商品
                        this.linkedProducts = true
                    } else if (this.form.type == 4) { // 商家
                        this.associatedBusinesses = true
                    }
                    this.form.id = 0
                }
            });
        }

        // 楼层内容保存
        saveTheoperation(i) {
            this.dialogFormVisible = false;
            this.form.content = this.gridData;
            this.frontPage(this.form);
        }

        //轮播图添加
        submitFormAdd1(ruleForm1: any) {
            (this.$refs[ruleForm1] as any).validate((valid: boolean) => {
                this.dialogFormAdd = false;
                if (valid) {
                    if (this.bannerChildEdit === true) { // 修改内容木块
                        this.gridData[this.bannerChildIndex] = this.newsForm;
                    } else {
                        this.gridData = this.gridData.concat(this.newsForm);
                    }
                    this.newsForm = {
                        image: '',
                        path: '',
                        name: '',
                        sort: 0
                    };
                }
            });
        }

        //添加商品/ 重贴数组
        submitFormAdd2(val: any) {
            let goodsNew = {
                id: val.id,
                name: val.title ? val.title : val.name,
                sort: 1,
                price: val.price
            }
            this.gridData = this.gridData.concat(goodsNew);
            this.addItem = false;
            this.addMerchant = false;
        }

        canceltheoperation(n: any) {//取消
            if (n == 0) {
                this.dialogFormVisible = false
            } else if (n == 1) {
                this.dialogTableVisible = false
            } else if (n == 2) {
                this.dialogFormAdd = false
            } else if (n == 3) {
                this.linkedProducts = false
            } else if (n == 4) {
                this.associatedBusinesses = false
            } else if (n == 5) {
                this.addItem = false
            } else if (n == 6) {
                this.addMerchant = false
            }
            this.loadData();
        }

        // 上传图片子组件传递过来的图片路径
        propImg(imgPath: any) {
            this.newsForm.image = imgPath;
        }

        //轮播编辑
        handleClick(val: any, i: number) {
            this.dialogFormAdd = true
            this.newsForm = val;
            this.bannerChildEdit = true;
            this.bannerChildIndex = i;
        }

        // 删除轮播子内容
        handleBannelChildDelClick(i:number) {
            this.gridData.splice(i,1);
        }

        // 删除楼层
        handleDelete(i:number, row:any ) {
            this.$confirm(row.title+'该楼层是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal:false
            }).then(() => {
                frontPage.modifyDel({id:row.id})
                    .then((res: any) => {
                        if(res.data.code==200){
                            this.$message({
                                message: '操作成功',
                                type: "success"
                            });
                            this.loadData();
                        }
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }

        //商品搜索
        searchForProducts() {
            goodsApi.searchForProducts({title: this.title})
                .then((res: any) => {
                    if (res.data.code == 200) {
                        this.goodsList = res.data.data.goods_lists.data
                    }
                })
        }

        //商家搜索
        searchForShop() {
            goodsApi.searchForShop({name: this.title, isRes:0})
                .then((res: any) => {
                    if (res.data.code == 200) {
                        this.shopList = res.data.data
                    }
                })
        }

        // 公共处理请求接口
        frontPage(data) {//修改&增加接口
            frontPage.editNew(data)
                .then((res: any) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '操作成功',
                            type: "success"
                        });
                        this.dialogTableVisible = false
                        this.linkedProducts = false
                        this.associatedBusinesses = false
                        this.addItem = false;
                        this.addMerchant = false;
                        this.loadData();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: "error"
                        });
                    }
                })
        }
    }
</script>

<style lang="scss" scoped>
    .el-range-editor.el-input__inner {
        margin-right: 10px
    }

    .add {
        padding: 10px;

    }

    .el-input {
        width: 198px;
    }

    .el-button {
        margin-left: 10px;
    }

    .cell .el-input {
        width: 50px;
    }
</style>